<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
	<meta name="author" content="webThemez.com">
	<title>欢迎来到拴马桩</title>
	<link rel="favicon" href="assets/images/favicon.png">
	<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
	<link rel="stylesheet" href="assets/css/style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
	<link rel="shortcut icon" href="Imperial/assets/img/logo.php">
	<link rel="stylesheet" type="text/css" href="assets/css/ShoppingCart.css"/>
	<link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
	<script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
</head>

<body>
	<!-- Fixed navbar -->
	<div th:replace="~{commons/commons::topbar(active='price')}"></div>
	<!-- /.navbar -->

	<header id="head" class="secondary">
		<div class="container">
			<div class="row">
				<div class="col-sm-8">
					<h1>Our Price</h1>
				</div>
			</div>
		</div>
	</header>
	<!-- container -->
	<br>
	<div id="app" class="container" style="height: 600px">
		<h2 class="title">购物车</h2>
		<table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
			<thead>
			<tr>
				<th colspan="2">商品信息</th>
				<th style="width: 14%;">商品金额</th>
				<th style="width: 14%;">
					商品编号
				</th>
				<th style="width: 14%;">
<!--					总金额-->
				</th>
				<th >编辑</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="item in productList">
				<td style="width: 5%;"><input type="checkbox" :checked="item.check" @click="checkBox(item)"/></td>
				<td class="goods">
					<img v-bind:src="item.parkingPicture" class="goods-left"/>
					<div class="goods-right">
						<p><a v-bind:href="getGoodsHref(item.number)">{{item.address}}</a></p>
<!--						<p class="tip">赠送：<span style="margin-right: 5px;" v-for="part in item.parts" v-text="part.partsName"></span></p>-->
					</div>
				</td>
				<td>{{item.price}}元</td>
				<td class="num">
<!--					<span v-if="item.reserve==1" class="flag">商品已被预定</span>-->
<!--					<span v-else class="flag">商品未被预定</span>-->
					{{item.number}}
				</td>
				<td class="redcolor">
<!--					{{item.productPrice*item.productQuentity}}-->
				</td>
				<td class="del">
					<button class="layui-btn layui-btn-danger" @click="del(item);">删除</button>
				</td>
			</tr>
			</tbody>
			<tfoot>
			<tr class="footer">
				<td><input type="checkbox" :checked="checkAllFlag" @click="checkAll"/></td>
				<td>
					<span class="redcolor">全选</span>&nbsp;&nbsp;
				</td>
				<td colspan="4">
					总计：<span>{{totalMoney}}</span>元
					<button @click="jz" type="button" class="btn">结账</button>
<!--					<button type="button" class="btn" @click="reserved">预定</button>-->
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;
				</td>
			</tr>
			</tfoot>
		</table>
	</div>
	<footer id="footer">

		<div class="footer2">
			<div class="container">
				<div class="row">

					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="simplenav">
<!--								<a href="index.html">Home</a> |-->
<!--								<a href="about.html">About</a> |-->
<!--								<a href="services.html">Services</a> |-->
<!--								<a href="price.html">Price</a> |-->
<!--								<a href="projects.html">Projects</a> |-->
<!--								<a href="contact.html">Contact</a>-->
							</p>
						</div>
					</div>

					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="text-right">
								Copyright &copy; 2021. Template by Shuanmazhuang
							</p>
						</div>
					</div>

				</div>
				<!-- /row of panels -->
			</div>
		</div>
	</footer>
</body>
</html>
<script>

	let vm=new Vue({
		el:'#app',
		data:{
			totalMoney:0,
			productList:[],
			checkAllFlag:false
		},
		created:function(){
			this.cartView();
		},
		methods:{
			getGoodsHref:function(val){
				return '/ProductDetails?ParkingId='+val
			},
			cartView:function () {
				let _this=this;
				$.ajax({
					url:'/shopping',
					success:function (res) {
						_this.productList=res;
						console.log(_this.productList);
					}
				})
			},
			//鐐瑰嚮澧炲姞鎴栧噺灏戝晢鍝佹暟閲忔寜閽悗淇敼瀵瑰簲閲戦
			changeMoney:function (product,way) {
				if (way>0) {
					product.productQuentity++;
				}else{
					product.productQuentity--;
					if (product.productQuentity<1) {
						product.productQuentity=1;
					}
				}
				this.getTotalMoney();
			},
			//鍗曢€夋璁剧疆
			checkBox:function (item){
				let _this=this;
				let num=0;
				if (typeof item.check == "undefined") {
					this.$set(item,"check",true);
				}else{
					item.check = !item.check;
				}
				this.productList.forEach(function (item,value) {
					if (item.check) {
						num++;
					}
				})
				if (num==_this.productList.length) {
					this.checkAllFlag=true;
				}else{
					this.checkAllFlag=false;
				}
				this.getTotalMoney();
			},
			//鍏ㄩ€夋寜閽缃�
			checkAll:function (){
				var _this=this;
				this.checkAllFlag = !this.checkAllFlag;
				this.productList.forEach(function(item,index){
					if (typeof item.check == "undefined") {
						_this.$set(item,"check",_this.checkAllFlag);
					}else{
						item.check = _this.checkAllFlag;
					}
				})
				this.getTotalMoney();
			},
			//鎬婚噾棰濊缃�
			getTotalMoney:function () {
				var _this=this;
				this.totalMoney = 0;
				this.productList.forEach(function (item,index) {
					if (item.check) {
						let num=item.price*1;
						_this.totalMoney += num;
					}
				})
			},
			//鍒犻櫎鍟嗗搧
			del: function (item) {
				let list=[];
				let index=this.productList.indexOf(item);
				this.productList.splice(index,1);
				this.getTotalMoney();
				list.push(item.id);
				$.ajax({
					url:'/deleteCart',
					data:{
						'deleteCartList':list
					},
					success:function (res) {
					}
				})
			},
			reserved:function () {
				let that=this;
				let reservedList=[];
				let flag="0";
				for (let i = 0; i < this.productList.length; i++) {
					if(this.productList[i].check){
						if(this.productList[i].reserve=="1"){
							layui.use('layer',function () {
								layer.msg("商品已被预定");
							})
							break;
						}
						reservedList.push(this.productList[i].id);
					}
				}
				layui.use('layer',function (){

					$.ajax({
						url: '/reserve',
						data: {
							'reserveList':reservedList
						},
						success: function (res) {
							let size=that.productList.length;
							if (res=="1"){
								for (let i = 0; i < size; i++) {
									if(that.productList[i].check==true){
										that.productList.splice(i,1);
										i--;
										size--;
									}
								}
								$.ajax({
									url:'/deleteCart',
									data:{
										'deleteCartList':reservedList
									},
									success:function (res) {
									}
								})
								that.getTotalMoney();
								layer.msg("预定成功");
							}
							else {
								layer.msg("预定失败");
							}
						}
					})
				})
			},
			jz:function (){
				let that=this;
				let size=this.productList.length;
				let sum=0;
				this.productList.forEach(function (item) {
					if (item.check) {
						sum++;
					}
				});
				if (sum==0){
					layui.use('layer',function () {
						layer.msg("您还没有选择商品");
					})
					return ;
				}
				let ok=confirm("是否结账？总金额为："+this.totalMoney);
				if(ok==false){
					ok=0;
				}else{
					ok=1;
				}
				let jz=[];

				this.productList.forEach(function (item) {
					if (item.check) {
						jz.push(item.id);
					}
				});
				$.post({
							url: "/jiezhang",
							data: {
								"jz" : jz,
								"ok" : ok,
							"monry" : this.totalMoney} ,
							success: function (data){

								layui.use('layer',function (){
									if(data=="1"){
										layer.msg("余额不足！购买失败")
									}else {
										if (ok == "1") {
											layer.msg("交易完成！")
										} else if (ok == "0") {
											layer.msg("订单已生成,请到我的订单中取消！")
										}
									}
								})
								if(data!="1"){
								let size=that.productList.length;
									for (let i = 0; i < size; i++) {
										if(that.productList[i].check==true){
											that.productList.splice(i,1);
											i--;
											size--;
										}
										that.checkAllFlag = !that.checkAllFlag;
										that.productList.forEach(function(item,index){
											if (typeof item.check == "undefined") {
												that.$set(item,"check",that.checkAllFlag);
											}else{
												item.check = that.checkAllFlag;
											}
										})
										that.getTotalMoney();
							}}}}
				)
			}
		}
	})
</script>